<template>
  <div class="home">
    <h2>代办事项</h2>
    <div class="add">
      <input type="text" v-model="newItem" placeholder="请输入代办事项">
      <button @click="addItem">添加</button>
    </div>
    <div class="tagBtns">
      <button :class="{active : itemClass === ''}" @click="itemClass=''">全部</button>
      <button :class="{active : itemClass === 'work'}" @click="itemClass='work'">工作</button>
      <button :class="{active : itemClass ==='study'}" @click="itemClass='study'">学习</button>
      <button :class="{active : itemClass === 'life'}" @click="itemClass='life'">生活</button>
    </div>
    <ul>
      <p v-if="filteredItems.length === 0">暂无任务</p>
      <div v-else>
        <li v-for="item in filteredItems" :key="item.id">
          <div v-if="editingId === item.id">
            <input class="editInput" v-model="editingText" />
            <select v-model="editingClass">
              <option value="work">工作</option>
              <option value="study">学习</option>
              <option value="life">生活</option>
            </select>
            <button class="save" @click="saveEdit">保存</button>
            <button class="cancel" @click="cancelEdit">取消</button>
          </div>
          <div v-else>
            <input type="checkbox" :checked="item.over" @change="toggleItem(item.id)">
            <p :class="{'text' : item.over}">{{ item.text }}</p>
            <p class="tag">{{ item.itemClass == 'work' ? '工作' : item.itemClass == 'study' ? '学习' : '生活' }}</p>
            <button class="edit" @click=editItem(item)>编辑</button>
            <button class="delete" @click="deleteItem(item)">删除</button>
          </div>
        </li>
      </div>
    </ul>
    
    <hr>
    <div class="footer">
      <p>总任务数: {{ items.length }}</p>
      <p>完成任务数: {{ completedCount }}({{ completionRate }})</p>
    </div>
    
  </div>
</template>

<script>
  export default {
    data() {
      return {
        newItem: '',
        items: localStorage.getItem('items')? JSON.parse(localStorage.getItem('items')) : [],
        itemClass: '',
        editingId: '',
        editingText: '',
        editingClass: ''
      }
    },
    computed: {
      filteredItems() {
        if (!this.itemClass) return this.items;
        return this.items.filter(item => item.itemClass === this.itemClass);
      },
      completedCount() {
        return this.items.filter(item => item.over).length;
      },
      completionRate() {
        if (this.items.length === 0) return '0%';
        return ((this.completedCount / this.items.length) * 100).toFixed(0) + '%';
      }
    },
    methods: {
      addItem() {
        if (!this.newItem.trim()) return;
        const item = {
          id : new Date().getTime(),
          text: this.newItem,
          itemClass: "work",
          over: false
        };
        this.items.push(item);
        this.newItem = '';
        this.setItem();
      },
      setItem() {
        localStorage.setItem('items', JSON.stringify(this.items));
      },
      editItem(item) {
        const {id, text, itemClass} = item;
        this.editingId = id;
        this.editingText = text;
        this.editingClass = itemClass.value;
      },
      saveEdit() {
        const item = this.items.find(i => i.id === this.editingId);
        if (!item) return;
        item.text = this.editingText;
        item.itemClass = this.editingClass;
        this.editingId = '';
        this.editingText = '';
        this.editingClass = '';
        this.setItem();
      },
      deleteItem(item) {
        this.items = this.items.filter(i => i.id !== item.id);
        this.setItem();
      },
      toggleItem(id) {
        const item = this.items.find(i => i.id === id);
        if (!item) return;
        item.over = !item.over;
        this.setItem();
      },
    }
  }
</script>
<style scoped>
  .home {
    width: 700px;
    margin: 0 auto;
    padding: 20px 50px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px #ccc;
  }
  h2 {
    margin: 20px;
    font-size: 38px;
  }
  .add {
    display: flex;
    margin: 20px 0;
  }
  .add input {
    flex: 1;
    height: 24px;
    padding: 5px;
    border-radius: 5px;
    margin-right: 20px;
    font-size: 16px;
  }
  .add button {
    padding: 5px 20px;
    border-radius: 5px;
    background-color: #42b983;
    color: #fff;
    cursor: pointer;
  }
  .add button:hover {
    background-color: #349876;
  }
  .tagBtns {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-around;
  }
  .tagBtns button {
    margin: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    flex: 1;
  }
  .active {
    background-color: #4ca9cb;
    color: #fff;
    font-weight: bold;
  }
  ul {
    margin-bottom: 20px;
  }
  li {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  li > div {
    display: flex;
    align-items: center;
  }
  li div input {
    margin-right: 10px;
  }
  li div:nth-child(2) {
    font-size: 16px;
    line-height: 24px;
  }
  li div .text {
    color: #999;
    text-decoration: line-through;
  }
  li div .tag {
    font-size: 16px;
    background-color: #42b983;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    margin-left: auto;
  }
  li div button {
    margin-left: 10px;
  }
  .editInput {
    flex: 1;
    font-size: 16px;
    height: 24px;
    padding: 5px;
    border-radius: 5px;
  }
  li div select {
    height: 30px;
    padding: 0 8px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    outline: none;
  }

  li div select:focus {
    border-color: #42b983;
  }
  .save {
    background-color: #42b983;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
  }
  .cancel {
    background-color: #ccc;
    color: #333;
    border-radius: 5px;
    cursor: pointer;
  }
  .delete {
    background-color: #f44336;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
  }
  .footer {
    display: flex;
    align-self: center;
  }
  .footer p {
    margin: 0 10px;
    font-size: 16px;
    color: #666;
  }
  .footer p:first-child {
    margin-right: auto;
  }
</style>
